<template>
	<view class="container">
		<view class="top">
			<view>
				<view class="tea">奶茶点餐</view>
				<view class="content">距离您100m</view>
			</view>
			<image src="../../static/logo1.png" mode=""></image>

		</view>
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="h100">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<view class="swiper-item">
						<image :src="item.iurl" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>


		<view class="list">
			<!-- 左侧是一个分类菜单（.left-list），用户可以点击不同的分类（如“奶茶”、“鲜牛乳”等）来筛选商品。 -->
			<view class="left-list">
				<!-- ：通过@click绑定点击事件，点击时设置cate变量的值为该分类的名称（如cate='奶茶'）。 -->
				<view @click="cate='奶茶'" class="cate" :class="{active: '奶茶'===cate}">
					<image src="../../static/icon/product_icon.png" mode=""></image>
					<view>奶茶</view>
				</view>
				<view @click="cate='鲜牛乳'" class="cate" :class="{active: '鲜牛乳'===cate}">
					<image src="../../static/niunai.png" mode=""></image>
					<view>鲜牛乳</view>
				</view>
				<view @click="cate='果茶'" class="cate" :class="{active: '果茶'===cate}">
					<image src="../../static/guochaxilie.png" mode=""></image>
					<view>果茶</view>
				</view>
				<view @click="cate='柠檬茶'" class="cate" :class="{active: '柠檬茶'===cate}">
					<image src="../../static/Cocktail.png" mode=""></image>
					<view>柠檬茶</view>
				</view>
				<view @click="cate='小料'" class="cate" :class="{active: '小料'===cate}">
					<image src="../../static/tupianxiaoliao.png" mode=""></image>
					<view>小料</view>
				</view>
			</view>

			<!-- 右侧是商品列表（.right-list），根据左侧选择的分类显示相应的商品 -->
			<view class="right-list">
				<!-- 通过Vue的v-for指令遍历goodsList数组 -->
				<!-- :key="goods.id"给每个循环的元素一个唯一的键值 -->
				<view v-for="goods in goodsList" :key="goods.id" class='goods'>
					<view>
						<!-- mode="aspectFill"确保图片保持其宽高比，同时填充整个容器。 -->
						<image :src="goods.img" mode="aspectFill" class="goods-img"></image>
					</view>
					<view class="goods-info">
						<view class="goods-name">
							{{ goods.name }}
						</view>
						<view class="goods-details">
							{{ goods.details}}
						</view>
						<view class="goods-price">
							<view>
								<text class="unit">￥</text><text class="price-text">{{ goods.price }}</text><text
									class="price-append">起</text>
							</view>
							<!-- 图标点击时调用addOrDelGoods(goods)方法 用于添加或删除商品到购物车。-->
							<!--使用v-if和v-else指令根据goods.isAdded的值决定显示哪个图标。如果goods.isAdded为true，则显示一个表示商品已加入购物车的图标（../../static/gouwuche.png）； -->
							<image v-if="goods.isAdded" src="../../static/gouwuche.png" mode="aspectFill" class="gwc"
								@click="addOrDelGoods(goods)"></image>
							<!-- 否则，显示一个默认的购物车图标（../../static/cart.png）。 -->
							<image v-else src="../../static/cart.png" mode="aspectFill" class="gwc"
								@click="addOrDelGoods(goods)"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				//定义图片数组
				swiperList: [{
						iurl: "https://img.51miz.com/preview/element/00/01/12/09/E-1120966-7BF7F34C.jpg"
					},
					{
						iurl: "https://tse2-mm.cn.bing.net/th/id/OIP-C.ocJJY2VTRJ3RgIwtiC1nSgHaLb?rs=1&pid=ImgDetMain"
					},
					{
						iurl: "https://img.zcool.cn/community/01gg6c7kwbp4bngdtudtws3136.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100"
					},
					{
						iurl: "https://gd-hbimg.huaban.com/1c6f30d56713c6ca6e46d7beba3a32df7593fa525d66b-ZcB5te_fw658"
					}
				],
				// cate：当前选择的商品分类，默认为“奶茶”。
				cate: '奶茶'
			}
		},
		computed: {
			// （通过mapGetters）来管理全局状态
			...mapGetters(["goods", "goodsOfCart"]),
			// goodsList：根据当前选择的分类过滤商品列表。
			goodsList() {
				const vm = this
				if (vm.cate) {
					return vm.goods.filter(i => {
						return i.sort === vm.cate
					})
				}
				return vm.goods
			},
			//existInCart：一个函数,用于检查某个商品是否已添加到购物车中。
			existInCart() {
				const allGoods = this.goodsOfCart
				return goods => {
					return allGoods.some(i => i === goods)
				}
			}
		},
		// onLoad() {
		// 	this.getSwiperImageList()
		// },
		methods: {
			// addOrDelGoods：根据商品是否已存在于购物车中，添加或删除商品。
			addOrDelGoods(goods) {
				const vm = this
				if (vm.existInCart(goods)) {
					vm.$store.dispatch('removeGoods', goods)
				} else {
					vm.$store.dispatch('addGoods', goods)
				}

			}
		}
	}
</script>

<style>
	.top {
		height: 10%;
		/* background: skyblue; */
		display: flex;
		justify-content: space-between;
		padding: 15rpx;
		box-sizing: border-box;
		align-items: center;
	}

	.top image {
		width: 200rpx;
		height: 100rpx;
	}

	.swiper {
		height: 30%;
	}

	.tea {
		font-weight: bold;
		color: orange;
		font-size: 42rpx;
	}

	.content {
		color: #ccc;
		font-size: 25rpx;
	}

	.h100 {
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		height: 100%;
	}

	/* 底部列表区域 */
	.list {
		display: flex;
		justify-content: space-between;
	}

	.list .left-list {
		height: 100%;
		width: 150rpx;
	}

	.left-list image {
		width: 70rpx;
		height: 70rpx;
	}

	.left-list>view {
		height: 150rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.left-list view {
		text-align: center;
		font-weight: bold;
	}

	.cate {
		background: #ccc;
	}

	.cate.active {
		background-color: #ffffff;
	}

	.list .right-list {
		flex: 1;
		height: 100%;
		background-color: #cccccc;
	}

	.goods {
		background-color: #ffffff;
		padding: 20rpx;
		display: flex;
		flex-direction: row;
	}

	.goods-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.goods-detair {
		line-height: 1.6;
		font-size: 24rpx;
		color: #666666;
	}

	.goods .goods-name {
		line-height: 2;
		font-size: 32rpx;
		font-weight: bold;
	}

	.goods .goods-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.goods-price {
		margin-top: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.unit {
		color: #c49446;
	}

	.price-text {
		font-size: 36rpx;
		color: #de2b2b;
	}

	.price-append {
		font-size: 24rpx;
		margin-left: 8rpx;
		color: #333333;
	}

	.gwc {
		width: 60rpx;
		height: 60rpx;
	}
</style>